<template>
  <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
    <a-layout>
      <div class="Container">
        <!-- 头部定位 -->
        <a-layout-header :style="headerStyle">
          <div class="textContent">
            <h1>农业外来入侵物种防控与管理平台</h1>
            <a-divider style="height: 1px; background-color: #e4e7ed" />
          </div>
        </a-layout-header>

        <!-- 内容定位 -->
        <a-layout-content :style="contentStyle" class="min-h-[300px] mt-3">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="2">
              <template #tab>
                <span class="text-xl flex items-center">
                  <ProjectOutlined />
                  项目动态
                </span>
              </template>
              <!-- 使用 ProjectDynamics 组件 -->
              <ProjectDynamics :dynamics="dynamics" :loading="loading" />
            </a-tab-pane>
          </a-tabs>
        </a-layout-content>
        <a-layout-footer :style="footerStyle"> </a-layout-footer>
      </div>
    </a-layout>
    <FooterComponent></FooterComponent>
  </a-space>
</template>

<script setup>
import FooterComponent from "./Footer.vue";
import { ref, onMounted } from "vue";
import { ProjectOutlined } from "@ant-design/icons-vue";
import { baseURL, getProjectDynamicAPI } from "./apis/homeAPI.js";
import ProjectDynamics from "./DataTable/ProjectDynamics.vue";

const dynamics = ref([]);
const loading = ref(true); // 初始化加载状态为 true

// 获取数据的函数
const getProjectDynamic = async () => {
  try {
    const res = await getProjectDynamicAPI();
    console.log(res); // 打印API响应
    const { data } = res;

    dynamics.value = data.map(item => ({
      id: item.id,
      title: item.attributes.title,
      image: baseURL + `${item.attributes.image.data.attributes.url}`,
      date: item.attributes.time,
      content: item.attributes.information
    })); // 存储数据到ref
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    loading.value = false; // 无论成功或失败，数据加载完成后将 loading 设置为 false
  }
};

// 在组件挂载时调用获取数据的函数
onMounted(() => {
  getProjectDynamic();
  document.title = '农业外来入侵物种防控与管理平台';
});

const activeKey = ref("2");
const headerStyle = {
  color: "#333",
  height: "72px",
};
const contentStyle = {
  // 保留可能需要的自定义样式
};
const footerStyle = {
  color: "#fff",
  backgroundColor: "#7dbcea",
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.Container {
  margin: 2px 58px;
}

.textContent {
  font-size: 20px;
}
</style>
